<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="checkAll" />
    </label>
    <span>
      <span>已完成</span>
      <strong style="color:red;font-size: 20px">{{computedCount}}</strong>
      <span>/全部</span>
      <strong style="color:green;font-size: 20px">{{total}}</strong>
    </span>
    <button class="btn btn-danger" @click="clearComputed">清除已完成任务</button>
  </div>
</template>

<script>
    export default {
        name: "todo-footer",
        props:{
          list:Array
        },
        computed:{
          //控制已完成任务的数量
          computedCount(){

            //reduce api的返回值就是adder
            return this.list.reduce((adder,item,index,arr)=>{
              //如果没有传初始值  回调第一次被调用时  adder是数组中的一个元素  item是第二个元素
              //如果没有传初始值  回调第一次被调用时  adder上一次回调的返回值  item是第三个元素
              //如果没有传初始值  回调第三次被调用时  adder上一次回调的返回值  item是第四个元素
              //.....

              //如果有传初始值  回调第一次被调用时  adder就是初始值  item是第一个元素
              //如果有传初始值  回调第一次被调用时  adder上一次回调的返回值  item是第二个元素
              //如果有传初始值  回调第三次被调用时  adder上一次回调的返回值  item是第三个元素
              //.....
              return adder + (item.checked ? 1 : 0)
            },0)

            /*var count = 0;
            this.list.forEach((item)=>{
                if(item.checked)
                  count++
            })
            return count;*/
          },
          //控制全选的复选框的
          checkAll:{
            get(){
              //如果flag为true 就代表已完成 0 /全部 0
              var flag = (this.list.length===0 && this.computedCount===0)
              //已完成 必须 等于 全部  ;全选按钮才能选中
              //已完成 和 全部不能同时等于0
              return (!flag && this.list.length === this.computedCount )
            },
            set(val){
              //将val传到app组件中  并修改list数据
              this.$bus.$emit("checkAll",val)
            }
          },
          //控制已全部的数量
          total(){
            return this.list.length;
          }
        },
        methods:{
          //清除已完成的任务
          clearComputed(){
            this.$bus.$emit("clearComputed")
          }
        }
    }
</script>

<style scoped>
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>
